import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import Order1 from '../../components/order'
import { Skeleton } from 'antd-mobile'
import { useDispatch } from 'react-redux'
import { setCitySelect } from '../../store/userSlice'
import { useNavigate } from 'react-router-dom'


function Order() {
  const navigate = useNavigate()
  const [data, setData] = useState([])
  const [isSeat, setIsSeat] = useState(true)
  const [loading, setLoading] = useState(true)
  const [isDesc, setisDesc] = useState(true)

  const user = useSelector((state) => state.user);
  const dispatch = useDispatch()

  const getData = async () => {
    setLoading(true);
    try {
      const res = await axios.post('/api/trip/train', {
        "start": user.start,
        "end": user.end,
        "date": user.date,
        "isSpeed": user.isSpeed,
        "isSeat": isSeat,
        "isDesc": isDesc,
        "page": 1,
      })

      if (res.data.code === 200) {
        setData(res.data.data)
      }
    } catch (error) {
      console.error('获取数据失败:', error)
    } finally {
      setLoading(false);
    }
  }


  useEffect(() => {
    getData()
  }, [isSeat, user.start, user.end, user.date, isDesc])


  const renderSkeleton = () => {
    return Array(5).fill(0).map((_, index) => (
      <div key={index} style={{
        display: 'flex',
        justifyContent: 'space-between',
        padding: '15px',
        borderBottom: '1px solid #eee',
        marginBottom: '10px'
      }}>
        <Skeleton.Title style={{ width: '20%', height: '40px' }} />
        <Skeleton.Title style={{ width: '20%', height: '40px' }} />
        <Skeleton.Title style={{ width: '20%', height: '40px' }} />
        <Skeleton.Title style={{ width: '20%', height: '40px' }} />
      </div>
    ))
  }

  return (
    <div>
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '15px' }}>
          <span onClick={() => {
            const prevDate = new Date(user.date)
            prevDate.setDate(prevDate.getDate() - 1)
            dispatch(setCitySelect({
              type: "date",
              val: prevDate.toISOString().split('T')[0]
            }))
          }}>
            前一天
          </span>
          <span>
            {user.date}
          </span>
          <span onClick={() => {
            const prevDate = new Date(user.date)
            prevDate.setDate(prevDate.getDate() + 1)
            dispatch(setCitySelect({
              type: "date",
              val: prevDate.toISOString().split('T')[0]
            }))
          }}>
            前一天
          </span>
        </div>

        {loading ? renderSkeleton() : <Order1  data={data}></Order1>}

        <div style={{
          position: 'fixed',
          bottom: '0',
          width: '100%',
          display: 'flex',
          justifyContent: 'space-around',
          backgroundColor: '#fff',
          padding: '10px 0',
          boxShadow: '0 -2px 10px rgba(0,0,0,0.1)'
        }}>
          <button
            onClick={() => setIsSeat(!isSeat)}
            style={{
              padding: '8px 16px',
              border: '1px solid #1677ff',
              borderRadius: '4px',
              background: isSeat ? '#1677ff' : '#fff',
              color: isSeat ? '#fff' : '#1677ff'
            }}
          >
            {isSeat ? '只看高铁' : '只看动车'}
          </button>
          <button onClick={() => setisDesc(!isDesc)} style={{
            padding: '8px 16px',
            border: '1px solid #1677ff',
            borderRadius: '4px',
            background: '#fff',
            color: '#1677ff'
          }}>
            按照出发时间排序
          </button>
        </div>
      </div>
    </div>
  )
}

export default Order